<template>
	<view class="Selece">
		<view v-for="(item, index) in tabdata" :key="index" class="toptab" :class="TabIndex === index ? 'on' : ''"
			@click="TopClick(index)">
			{{ item }}
			<uni-icons type="bottom" size="15" v-if="TabIndex !== index"></uni-icons>
			<uni-icons type="top" size="15" v-else></uni-icons>
		</view>
		<view class="Tab-con" v-if="IsTab">
			<view class="Tab-con-item1" v-if="TabIndex === 0">
				<view class="Tab-con-item1-con">
					<view class="left">
						<view v-for="(item, index) in codedata" :key="index" :class="TabIndexyi === index ? 'lefton' : ''"
							@click="LeftClick(index)">
							{{ item.title }}
						</view>
					</view>
					<view class="con">
						<view v-for="(item, index) in codedata[TabIndexyi]?.chirden" :key="index"
							:class="TabIndexer === index ? 'conon' : ''" @click="ConClick(item, index)">
							{{
								item.title ? item.title : item
							}}
						</view>
					</view>
					<view class="right">
						<view v-for="(item, index) in codedata[TabIndexyi]?.chirden[TabIndexer]?.chirden" :key="index"
							@click="RightClick(item)">
							<view>
								{{ item && item }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="Tab-con-item2" v-if="TabIndex === 1">
				<view v-for="(item, index) in Pricedata" :key="index" :class="Item2Index === index ? 'item2on' : ''"
					@click="Item2Click(item, index)">
					{{ item }}
				</view>
				<button @click="Item2Ok()">确定</button>
			</view>
			<view class="Tab-con-item3" v-if="TabIndex === 2">
				<view v-for="(item, index) in HuxingData" :key="index" class="Tab-con-item3-item1">
					<text>{{ item.title }}</text>
					<view>
						<view v-for="(item2, index2) in item.con" class="tab-con-item-item" :key="index2"
							:class="Item3topIndex === index2 ? 'item3topon' : ''" @click="Item3topClick(item2, index2)">
							<view>
								{{ item2 }}
							</view>
						</view>
					</view>
				</view>
				<view v-for="(item, index) in HuxingData2" :key="index" class="Tab-con-item3-item2">
					<text>{{ item.title }}</text>
					<view>
						<view v-for="(item2, index2) in item.con" class="tab-con-item-item" :key="index2"
							:class="Item3bomIndex === index2 ? 'item3bomon' : ''" @click="Item3bomClick(item2, index2)">
							<view>
								{{ item2 }}
							</view>
						</view>
					</view>
				</view>
				<button @click="Item2Ok()">确定</button>
			</view>
			<view class="Tab-con-item4" v-if="TabIndex === 3">
				<view v-for="(item, index) in Shaixuan1" :key="index" class="Tab-con-item3-item1">
					<text>{{ item.title }}</text>
					<view>
						<view v-for="(item2, index2) in item.con" class="tab-con-item-item" :key="index2"
							:class="Item4Index1 === index2 ? 'item3topon' : ''" @click="Item4Click1(item2, index2)">
							<view>
								{{ item2 }}
							</view>
						</view>
					</view>
				</view>
				<view v-for="(item, index) in Shaixuan2" :key="index" class="Tab-con-item3-item2">
					<text>{{ item.title }}</text>
					<view>
						<view v-for="(item2, index2) in item.con" class="tab-con-item-item" :key="index2"
							:class="Item4Index2 === index2 ? 'item3bomon' : ''" @click="Item4Click2(item2, index2)">
							<view>
								{{ item2 }}
							</view>
						</view>
					</view>
				</view>
				<view v-for="(item, index) in Shaixuan3" :key="index" class="Tab-con-item3-item3">
					<text>{{ item.title }}</text>
					<view class="Tab-con-item-con">
						<view v-for="(item2, index2) in item.con" class="tab-con-item-item" :key="index2"
							:class="Item4Index3 === index2 ? 'item3bomon' : ''" @click="Item4Click3(item2, index2)">
							<view>
								{{ item2 }}
							</view>
						</view>
					</view>
				</view>
				<button @click="Item2Ok()">确定</button>
			</view>
		</view>
		<view class="jian" @click="Paixu">
			<image src="http://10.31.71.52:7002/public/static/Xinfang/排序排行.png" />
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import codedata from './data.json';

const emits = defineEmits(['TabPaixu']);

// 控制内容区显示/隐藏
const IsTab = ref(false);
// 头部tab切换标题
const tabdata = reactive(['区域', '价格', '户型', '筛选']);
// 头部tab切换高亮
const TabIndex = ref(false);
// 头部tab切换事件
const TopClick = (index) => {
	if (TabIndex.value === index) {
		TabIndex.value = false
		IsTab.value = false
	} else {
		TabIndex.value = index
		IsTab.value = true
	}
}


// 区域tab切换高亮
const TabIndexyi = ref(0);
const TabIndexer = ref(1);
// 区域tab切换事件 一级
const LeftClick = (index) => {
	TabIndexyi.value = index
}
// 区域tab切换事件 二级
const ConClick = (item, index) => {
	console.log(item);
	TabIndexer.value = index
}
// 区域tab切换事件 三级
const RightClick = (item) => {
	console.log(item);
	IsTab.value = false
}

// 价格区tab切换内容
const Pricedata = reactive([
	'不限',
	'≤ 10万',
	'20万-30万',
	'30万-50万',
	'50万-100万',
	'≥ 1000万',
]);
// 价格tab切换高亮
const Item2Index = ref(0);
// 储存价格
const ItemPrice = ref('不限');
// 价格点击事件
const Item2Click = (item, index) => {
	ItemPrice.value = item;
	Item2Index.value = index;
	console.log(ItemPrice.value);
}
// 价格区确定按钮点击事件
const Item2Ok = () => {
	IsTab.value = false
	TabIndex.value=false
}

// 户型区域数据
const HuxingData = reactive([
	{
		title: '卖房选型',
		con: [
			'不限',
			'新房',
			'二手房'
		]
	}
]);
const HuxingData2 = reactive([
	{
		title: '户型',
		con: [
			'不限',
			'1室',
			'2室',
			'3室',
			'3室+'
		]
	}
]);
// 户型区域高亮
const Item3topIndex = ref(0);
const Item3bomIndex = ref(0);
// 户型区点击事件
const Item3topClick = (item, index) => {
	console.log(item);
	Item3topIndex.value = index
}
const Item3bomClick = (item, index) => {
	console.log(item);
	Item3bomIndex.value = index
}

// 筛选区数据
const Shaixuan1 = reactive([
	{
		title: '验真情况',
		con: [
			'不限',
			'安逸'
		]
	}
]);
const Shaixuan2 = reactive([
	{
		title: '朝向',
		con: [
			'东',
			'西',
			'南',
			'北',
			'南北',
		]
	}
]);
const Shaixuan3 = reactive([
	{
		title: '住房条件',
		con: [
			'邻地铁',
			'押一付一',
			'配套齐全',
			'可短租',
			'女生合租',
			'男生合租',
			'独立卫生间',
			'独立阳台',
		]
	}
]);
// 筛选区高亮
const Item4Index1 = ref(0);
const Item4Index2 = ref(0);
const Item4Index3 = ref(0);
// 筛选区点击事件
const Item4Click1 = (item, index) => {
	console.log(item);
	Item4Index1.value = index
}
const Item4Click2 = (item, index) => {
	console.log(item);
	Item4Index2.value = index
}
const Item4Click3 = (item, index) => {
	console.log(item);
	Item4Index3.value = index
}

const Paixu = () => {
	emits('TabPaixu')
}
</script>

<style scoped lang="scss">
.Selece {
	width: 100%;
	height: 100rpx;
	align-items: center;
	display: flex;
	justify-content: space-around;
	position: relative;

	.on {
		color: #FFA6A5;
	}

	.toptab {
		display: flex;
		align-items: center;
		width: 22%;
		justify-content: center;
	}

	.jian {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 12%;

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.Tab-con {
		width: 100%;
		height: 824rpx;
		position: absolute;
		top: 80rpx;
		left: 0;
		z-index: 666;
		background: #fff;

		.Tab-con-item1 {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;

			.Tab-con-item1-con {
				display: flex;
				width: 100%;
				height: 100%;

				.left {
					width: 25%;
					height: auto;
					background: #fff;
					display: flex;
					align-items: center;
					flex-direction: column;

					.lefton {
						color: red;
					}

					view {
						margin-top: 30rpx;
					}
				}

				.con {
					width: 35%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					overflow: scroll;
					background: #f1eded;

					.conon {
						color: red;
					}

					view {
						margin-top: 24rpx;
					}
				}

				.right {
					width: 40%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					overflow: scroll;
					background: #f1eded;

					view {
						margin-top: 14rpx;
					}
				}
			}

		}

		.Tab-con-item2 {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;

			.item2on {
				color: red;
			}

			button {
				color: #fff;
				width: 100%;
				background: #FD5958;
				position: absolute;
				left: 0;
				bottom: 0;

			}
		}

		.Tab-con-item3 {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;

			.Tab-con-item3-item1 {
				display: flex;
				align-items: center;
				justify-content: space-around;
				flex-direction: column;
				width: 100%;
				height: 200rpx;
				margin-top: 40rpx;


				view {
					width: 130rpx;
					height: 40rpx;
					margin-right: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.item3topon {
					color: #fff;
					background: #FF9900;
				}
			}

			.Tab-con-item3-item2 {
				display: flex;
				align-items: center;
				justify-content: space-around;
				flex-direction: column;
				width: 100%;
				height: 200rpx;
				margin-top: 40rpx;
				flex-wrap: wrap;

				view {
					width: 130rpx;
					height: 40rpx;
					margin-right: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.item3bomon {
					color: #fff;
					background: #FF9900;
				}
			}

			button {
				color: #fff;
				width: 100%;
				background: #FD5958;
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}

		.Tab-con-item4 {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;

			.Tab-con-item3-item1 {
				display: flex;
				align-items: center;
				justify-content: space-around;
				flex-direction: column;
				width: 100%;
				height: 120rpx;
				margin-top: 40rpx;

				view {
					width: 130rpx;
					height: 40rpx;
					margin-right: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.item3topon {
					color: #fff;
					background: #FF9900;
				}
			}

			.Tab-con-item3-item2 {
				display: flex;
				align-items: center;
				justify-content: space-around;
				flex-direction: column;
				width: 100%;
				height: 120rpx;
				margin-top: 40rpx;
				flex-wrap: wrap;
				margin-bottom: 20rpx;

				view {
					width: 130rpx;
					height: 40rpx;
					margin-right: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.item3bomon {
					color: #fff;
					background: #FF9900;
				}
			}

			.Tab-con-item3-item3 {
				width: 95%;
				height: 360rpx;
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				margin: 0 auto;

				.Tab-con-item-con {
					width: 100%;
					height: 100%;
					display: flex;
					flex-wrap: wrap;
				}

				view {
					width: 180rpx;
					height: 40rpx;
					margin-right: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}


				.item3bomon {
					color: #fff;
					background: #FF9900;
				}
			}

			button {
				color: #fff;
				width: 100%;
				background: #FD5958;
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
	}
}
</style>